<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="Pragma" content="no-cache" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			td,
			th,
			li {
				vertical-align: middle;
				text-align: center;
			}
			
			td {
				background-color: #f0f0f0;
			}
			
			.meigou {
				display: block;
				width: 14px;
				height: 14px;
				margin: auto;
				background-image: url(img/list-view_4e60b0c.png);
				background-position: -8px -12px;
			}
			
			.gou {
				background-position: -40px -12px;
			}
			.major{
				border: none;
				background-color: white;
			}
		</style>
	</head>

	<body>
		
		<div class="container">
			<div class="row" style="border-bottom: 1px solid #000;">
				<img class="img-responsive col-lg-4" src="img/logo.png.jpg" />
			</div>
			<div class="row">
				<h3 class="col-lg-12 text-center">教师授课满意度问卷调查表</h3>
			</div>
			<div class="row">
				<h4 class="col-lg-12" style="text-align: right;"><small> 编号：XHQ-YNKM-QR-7.5-13</small></h4>
			</div>
			<div>
				<form   accept-charset="UTF-8">
					<div class="row">
						<ul class="list-group list-inline">
							<li class="col-lg-3">
								<div class="input-group">
									<input type="text" class="form-control" id="majortext" name="major"/>
									<div class="input-group-btn">
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">专业<span class="caret"></span></button>
										<ul class="dropdown-menu pull-right" id="major">
										</ul>
											<input type='hidden' name='major_id' id='majorhidden'/>
									</div>
								</div>
							</li>

							<li class="col-lg-3">
								<div class="input-group">
									<input type="text" class="form-control" id="coursestext" name="course"/>
									<div class="input-group-btn">
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">课程<span class="caret"></span></button>
										<ul class="dropdown-menu pull-right" id="courses">
										</ul>
											<input type='hidden' name='courses_Id' id='courseshidden'/>
									</div>
								</div>
							</li>

							<li class="col-lg-3">
								<div class="input-group">
									<input type="text" class="form-control" id="teachertext" name="teacher"/>
									<div class="input-group-btn">
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">教师<span class="caret"></span></button>
										<ul class="dropdown-menu pull-right" id="teacher">
										</ul>
										 <input type='hidden' name='teacher_Id' id='teacherhidden'/>
									</div>
								</div>
							</li>

							<li class="col-lg-3"><input type="text" class="form-control text-center" id="time" readonly="readonly" name="date" /></li>
						</ul>
					</div>
					<div class="row" style="margin-top: 20px;">
						<table class="table table-bordered" >
							<tr>
								<th rowspan="3" style="vertical-align: middle;">序号</th>
								<th rowspan="3" style="vertical-align: middle;">调查项</th>
								<th rowspan="3" style="vertical-align: middle;">调查细节项目</th>
								<th colspan="5">
									满意度得分
								</th>
							</tr>
							<tr>
								<td>很满意</td>
								<td>满意</td>
								<td>一般</td>
								<td>不满意</td>
								<td>很不满意</td>
							</tr>
							<tr >
								<td>5分</td>
								<td>4分</td>
								<td>3分</td>
								<td>2分</td>
								<td>1分</td>
							</tr>
							
							<tr id="tab">
							<td colspan='2'>建议</td>
						     <td colspan='6'>
						     	<textarea class='col-lg-12' style='border: 0px;' name='suggest' value='123'></textarea>
						     </td>
							</tr>
						</table>
					</div>				
				</form>
				<button class="btn-primary btn-lg" id="submit">提交评分</button>
			</div>
			<div>
				<p>备注： 1.请在满意程度分项内选择一项打“√”； 2.本问卷属无记名打分，为进一步提高我院教学质量，检查教师授课水平、教学成效，请您本着公平、公正的态度认真、属实填写。3.本问卷不选默认5分。
				</p>
			</div>
		</div>
		<script type="text/javascript">
			(function(){//时间
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				$("#time").attr("value", year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds);
			})();//自调用函数。添加一个括号
			
			//取得专业的相关数据
			$.ajax({
				type:"get",
				url:"getMajor",
				success:function(data){
					var jsonObj=jQuery.parseJSON(data);
					$.each(jsonObj, function(i,ma) {
						$("#major").append("<li class='major'>"+ma.name+"</li>");
					});	
				}
			});
			
			//得到major专业的点击事件，绑定点击，取得点击对象的父类（由于加载机制的关系，页面加载的同时并不能马上给予对象点击事件）
			$("#major").bind("click",event,function(){
				var major = event.target;
				var txt=$(major).text();
				console.log(txt);
				$("#courses").html("");
				//$("courses").empty();
				$("#majortext").val(txt);//给input属性				
			     var xhr = $.ajax({//这个ajax去后端取得课程的数据
			    	       type:"get",
			    	       url:"getCourse",
			    	       async:true,
			    	       success:function(data){
//			    		alert(data);			    		
//			    		var jsonObj = jQuery.parseJSON(data);
                     
			    		   $.each(data, function(i,cu) {
			    			
			    		   $("#courses").append("<li class='courses'>"+cu.name+"</li>");
			    			
			    		});
			    	}
			    });
			})	
			
			$("#courses").bind("click",event,function(){//给courses课程取得一个点击事件
				var courses = event.target;//指向点击事件的目标
				var txt = $(courses).text();
				$("#teacher").html("");//避免重复加载li，所以在每次加载li之前将其改为空
				console.log(txt);				
				$("#coursestext").val(txt);//将txt放入input				
				$.ajax({//再次请求，取得teacher教师的相关信息
					type:"get",
					url:"getTeacher",
					async:true,
					success:function(data){						
						$.each(data, function(i,te) {
							$("#teacher").append("<li class='teacher'>"+te.name+"</li>");
						});
					}
				});
			})
			
			$("#teacher").bind("click",event,function(){
				var teacher = event.target;
				var txt = $(teacher).text();
				//$("ul").html("");
				console.log(txt);
				$("#teachertext").val(txt);
			})
			
		    window.onload=function(){
		    	$.ajax({//自动加载评分项目
		    		type:"get",
		    		url:"getContent",
		    		async:true,
		    		success:function(data){
		    			$.each(data, function(i,co) {
		    				$("#tab").before("<tr ><td id=''>"+co.id+"</td><td></td><td class='content'>"+co.item+"</td>"
		    				                 +"<td><label class='checkbox-inline'><input type='radio' name='"+co.id+"' value='5'/></label></td>"
		    				                 +"<td><label class='checkbox-inline'><input type='radio' name='"+co.id+"' value='4'/></label></td>"
		    				                 +"<td><label class='checkbox-inline'><input type='radio' name='"+co.id+"' value='3'/></label></td>"
		    				                 +"<td><label class='checkbox-inline'><input type='radio' name='"+co.id+"' value='2'/></label></td>"
		    				                 +"<td><label class='checkbox-inline'><input type='radio' name='"+co.id+"' value='1'/></label></td>"
		    				                 +"</tr>");//在指定标签之前再添加列（需要将页面撑开）
		    			});
		    		}
		    	     
		    	});
		    	
		    }
		    
		    $("table").bind("click",event,function(){//给父类绑定点击事件
		    	var curRadio=event.target;
		    	$(curRadio).attr("checked","checked");//给radio一个点击属性
		    })
		    
		         $("#submit").click(function(){//提交时
		         	var majorName=$("#majortext").val();
		         	var courseName=$("#coursestext").val();
		         	var teacherName=$("#teachertext").val();//得到文本框的实际名字
		         	
		         	var scoreArr=new Array();//分数需要给一个数组
		         	$("input[type=radio]").each(function(){//循环radio的内容
		         		if($(this).attr("checked")=="checked"){//给当前点击的radio一个监听
		         			scoreArr.push($(this).val());//将监听得到的值（实际分数），提交给score数组
		         		}
		         	})
		         	console.log(scoreArr);
		         	
		         	var scoreString=scoreArr.join();//加入string数组
		         	console.log(scoreString);
		         	
		         	$.ajax({
		         		type:"post",
		         		url:"setForm",
		         		async:true,
		         		data:{"major":majorName,"course":courseName,"teacher":teacherName,"scores":scoreString},//包装成json
		         		success:function(){
		         			alert("提交成功！");
		         			window.location.reload();
		         		}
		         	});
		         })
//		    	(function(){
//		    		var i = 1;
//		    		htm = "<td>";
//		    		for(i;i<=5;i++){
//		    			htm+="<label class='checkbox-inline'><input type='hidden' id='"+i+"' name='"+i+"'"+"</label>"
//		    		}
//		    		htm+="</td>"; 
//		    		$(".content").after(htm);
//		    	})();
//		    	$.ajax({
//		    		type:"get",
//		    		url:"getScore",
//		    		async:true,
//		    		success:function(data){
//		    			var htm = "<td><select class='form-control'>";
//		    			$.each(data, function(i,sc) {
//		    				
//		    				htm+="<option>"+sc.value+"</option>"
//		    				
//		    			});	
//		    			htm+="</select></td>";
//		    				$(".content").after(htm);
//		    		},
//		    		complete:function(){
//		    			$("option").eq(0).attr("selected","selected");
//		    		}
//		    	});				    																
		</script>
	</body>